<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>游戏大厅</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/game_hall.css">
</head>
<body>
<div class="nav">五子棋对战</div>
<!-- 整个页面的容器元素 -->
<div class="container">
    <!-- 这个 div 在 container 中是处于垂直水平居中这样的位置的 -->
    <div>
        <!-- 展示用户信息 -->
        <div id="screen"></div>
        <!-- 匹配按钮 -->
        <div id="match-button">开始匹配</div>
    </div>
</div>

<script src="js/jquery.min.js"></script>

<script>
    $.ajax({
        type:'get',
        url:'/userInfo',
        success:function(body){
            let screenDiv=document.querySelector('#screen');
            screenDiv.innerHTML='玩家: '+body.username+ " 分数 : " + body.score
            +" <br>比赛场次: "+ body.totalCount + " 获胜场数: " + body.winCount
        },
        error:function(){
            alert("获取用户信息失败!");
        }
    });

    //和服务器建立连接,
    //此处的必须写作/findMatch,千万不能写作/findMatch/,
    //location.host可以拿到本页面的ip和端口号
    let websocketurl='ws://'+location.host+'/findMatch';
    let websocket=new WebSocket(websocketurl);

    //连接建立
    websocket.onopen=function(){
        console.log("onopen");
    }//连接关闭
    websocket.onclose=function(){
        console.log("onclose");
        
        
    }//连接异常
    websocket.onerror=function(){
        console.log("onerror");
    }
    //监听页面 关闭事件,在 页面关闭之前,手动调用这里的websocket的close(方法)
  
    window.onbeforeunload=function(){
        websocket.close();
    }
    //处理服务器返回的响应
    websocket.onmessage=function(e){
        //处理服务器返回的响应数据,这个响应是针对"开始匹配"/"结束匹配"来对应的
        //解析得到 的响应对象,返回的数据是json字符串,解析成js对象(使用parse),js转json使用stringify
        let resp=JSON.parse(e.data);//json字符串转成js对象
        let matchButton=document.querySelector('#match-button');
        if(!resp.ok){
            console.log("游戏大厅中接收到失败响应! "+resp.reason);
            return ;
        }
        if(resp.message=='startMatch'){
            //开始匹配请求发送成功
            console.log("进入匹配队列成功!");
            matchButton.innerHTML='匹配中...(点击停止)';
        }else if(resp.message=='stopMatch'){
            //结束匹配发送请求成功
            console.log("离开匹配队列成功!");
            matchButton.innerHTML='开始匹配';
        }else if(resp.message=='matchSuccess'){
            //已经匹配到对手了
            console.log("匹配到对手!进入游戏房间");
            location.replace("/game_room.html");
        }else if(resp.message=='repeatConnection'){
        //之前为了实现多开的效果,然后在这个逻辑中加入alert和跳转
        //如果多开,服务器就会主动关闭websocket连接,导致客户端调整到login,html
        alert("当前检测多开!!请使用其他账号登录!");
        location.replac("/login.html");
        }
        else{
            console.log("收到了非法的响应! message= "+resp.message);
        }
    }
    //给匹配按钮添加一个点击事件(客户端的请求)
    let matchButton=document.querySelector("#match-button");
    matchButton.onclick=function(){
        //在触发websockt请求之前,先确认websocket连接是否好着呢
        if(websocket.readyState==websocket.OPEN){
            //如果当前的readyState处在OPEN状态,说明连接好着呢
            //这里发送的数据有两种可能,开始匹配/停止匹配
            //matchButton.innerHTML显示的文字
            if(matchButton.innerHTML=='开始匹配'){
                console.log("开始匹配");
                websocket.send(JSON.stringify({
                        message:'startMatch',
                    }));
            }else if(matchButton.innerHTML=='匹配中...(点击停止)'){
                console.log("停止匹配");
                websocket.send(JSON.stringify({
                    message:'stopMatch',
                }));
            }
        }else{
            //这是说明连接当前异常状态
            alert("当前您的连接已经断开,请重新登录");
            location.replac('/login.html');
        }
    }
</script>
</body>
</html>